{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .original {
        border: 1px solid #999;
        font-size: 10px !important;
        border-radius: 4px;
        line-height: 14px;
        width: 30px;
        color: #505050;
        text-align: center;
        margin-right: 5px;

        position: relative;
        padding: 0 2px;
    }
    .price {
        color: #e4393c;
        font-size: 14px;
    }
    .mui-table h4 ,.mui-media-body h4{
        font-size: 15px;
        margin: 0;
        font-weight: 300;
    }
    .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
        top: 0px !important;
    }
    .mui-btn1{
		        margin-top: 10px;
		        margin-right:80px;
		        margin-left: 10px;
	}
	.inputplaceholder::-webkit-input-placeholder{
            color:#FFFFFF;
            text-align: center;
        }
        .inputplaceholder::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#FFFFFF;
            text-align: center;
        }
        .inputplaceholder:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#FFFFFF;
            text-align: center;
        }
        .inputplaceholder:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#FFFFFF;
            text-align: center;
        }
	
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a href="/center/index" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>

<div class="mui-content">

    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
        <ul class="margin-top-0" >
            <a class="mui-control-item {%if opt == 1%}mui-active{%endif%}" href="/center/safebox/index/?opt=1">
                                       存入
            </a>
            <a class="mui-control-item {% if opt == 2%}mui-active{%endif%}" href="/center/safebox/index/?opt=2">
                                          取出
            </a>
            <a class="mui-control-item " href="#">
            </a>
        </ul>
            
        <ul class="mui-table-view margin-top-0" >
        {%if opt==1 %}
        <form class="mui-input-group" id="safeboxform">
              <div class="mui-input-row">
                        <label>存入玩家ID</label>
                        <input type="number" pattern="\d*" class="mui-input-clear" placeholder="输入存入玩家ID" value="" name="depuserId"  >
              </div>
              
        </form>
        <li class="mui-table-view-divider" style="text-align:center">存入房间</li>
        <div class="mui-input-row padding-8">
             <input type="text"  class="inputplaceholder" style="background-color:#575757" placeholder="点击创建房间生成存入房间号" id="verroomno"  readonly>
        </div>
        <div class="mui-button-row " style="margin-top:-25px">
			<button class="mui-btn1 mui-btn-primary" type="button" id="createverroom">创建房间</button>&nbsp;&nbsp;
			<button class="mui-btn1 mui-btn-primary" type="button" id="copyverroom">复制房号</button>
		</div>
		
		<p class="text-center" style="margin-top:20px">
                           温馨提示：密保房间生成的房间号仅在24小时内有效
        </p>
        {%endif%}
        
        {%if opt==2 %}
        <form class="mui-input-group" id="safeboxform">
              <div class="mui-input-row">
                        <label>赠送玩家ID</label>
                        <input type="number" pattern="\d*" class="mui-input-clear" placeholder="输入赠送玩家ID" value="" name="popuserId"  >
              </div>
              <div class="mui-input-row">
                        <label>赠送金额</label>
                        <input type="number"  pattern="\d*" class="mui-input-clear" placeholder="输入赠送金币" value="" name="coinnum"  >
              </div>
        </form>
        
        <li class="mui-table-view-divider" style="text-align:center">取出房间</li>
        <div class="mui-input-row padding-8">
             <input type="text" class="inputplaceholder" style="background-color:#575757" placeholder="点击确认生成取出房间号" id="poproomno" readonly>
        </div>
        
        <div class="mui-button-row " style="margin-top:-25px">
			<button class="mui-btn1 mui-btn-primary" type="button" id="creatpoproom">确定</button>&nbsp;&nbsp;
			<button class="mui-btn1 mui-btn-primary" type="button" id="copypoproom">复制房号</button>
		</div>
        <p class="text-center" style="margin-top:20px">
                           温馨提示：取出房间号仅在24小时内有效
        </p>
        {%endif%}
        
        <li class="mui-table-view-divider" style="text-align:center">生成记录({{count}})</li>
        </ul>
    </div>
    
    <!--下拉刷新容器-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top: {%if opt == 1 %}350px{%elif opt == 2 %}390px {%endif%} ">
        <div class="mui-scroll">
            <div class="mui-table">
            <!--数据列表-->
            {% if list and list.length>0 %}
            {%set n = 1%}
            {%for item in list %}
               <ul  class="mui-table-view {%if n ==1 %}margin-top-0{%else%}margin-top-6{%endif%}">
                    <li class="mui-table-view-cell size-14">
                        <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>房号:{{item.password}}
                                </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>生成时间:{{item.create_time}}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell size-14">
                        <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>玩家ID:{{item.uid}}
                                </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>金币:{{item.deposit_count}}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell size-14" >
                       <div class="mui-row">
                            <div class="mui-col-xs-4">
                                <div>状态:
                                 {%if item.status == 0 %}
                                  {%if opt==1 %}
                                  <span class="text-success">待存入</span>
                                  {%elif opt==2 %}
                                  <span class="text-success">待取出</span>
                                  {%endif%}
                                 {%elif item.status == 1 %}
                                 <span class="text-warning">待处理</span>
                                 {%elif item.status == 2 %}
                                 <span class="text-success">操作成功</span>
                                 {%elif item.status == 3 %}
                                 <span class="text-success">操作失败</span>
                                 {%elif item.status == -1 %}
                                 <span class="text-danger">超时失败</span>
                                 {%endif%}
                                </div>
                            </div>
                            <div class="mui-col-xs-7">
                                <button class="mui-btn mui-btn-primary copyroomno" type="button" id="{{item.password}}">复制</button>
                                {%if item.status == 1 and opt==1 %}
                                <a class="mui-btn mui-btn-primary getcoinnum" id="{{item.password}}">领取</a>
                                {%endif%}
                            </div>
                        </div>
                    </li>
                    
                </ul>
            {%set n=n+1%}
            {%endfor%}
            {% else%}
            <ul class="mui-table-view margin-top-0">
                    <li class="mui-table-view-cell size-14" >
                       <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>暂无数据
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
             {%endif%}
        </div>
        </div>
    </div>
</div>

<script id='msg-template' type="text/template">

<% for(var i in record){ var item=record[i]; var opt = "{{opt}}"; %>
<ul  class="mui-table-view margin-top-6">
<li class="mui-table-view-cell size-14">
                        <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>房号:<%=item.password %>
                                </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>生成时间:<%=item.create_time %>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell size-14">
                        <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>玩家ID:<%=item.uid%>
                                </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>金币:<%=item.deposit_count %>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="mui-table-view-cell size-14" >
                       <div class="mui-row">
                            <div class="mui-col-xs-4">
                                <div>状态:
                                 <% if(item.status==0) { %>
                                    <% if(opt==1) { %>
                                       <span class="text-success">待存入</span>
                                    <% } else if(opt==2) { %>
                                        <span class="text-success">待取出</span>
                                    <% } %>
                                 <% } else if(item.status == 1) { %>
                                    <span class="text-warning">待处理</span>
                                <% } else if(item.status == 2) { %>
                                    <span class="text-success">操作成功</span>
                                <% } else if(item.status == 3) { %>
                                    <span class="text-success">操作失败</span>
                                <% } else if(item.status == -1) { %>
                                    <span class="text-danger">超时失败</span>
                                 <% } %>
                                </div>
                            </div>
                            <div class="mui-col-xs-7">
                                <button class="mui-btn mui-btn-primary copyroomno" type="button" id="<%=item.password %>">复制</button>
                                <% if(item.status == 1 && opt==1) { %>
                                <a class="mui-btn mui-btn-primary getcoinnum" id="<%=item.password%>">领取</a>
                                <% } %>
                            </div>
                        </div>
                    </li>
 </ul>
<% } %>
</script>
{% endblock%}

{% block script %}
<script>
    //加载模板
    //var tplRender =  _.template(document.getElementById("tpl").innerHTML);
    
    /**
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    */
    
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    var opt = "{{opt}}";
    
    var tops=parseInt(sessionStorage.getItem("{{ctx.url}}_top"))||0;
    var size=parseInt(sessionStorage.getItem("{{ctx.url}}_size"))||0;
    console.log('tops 1---------:'+tops);
    console.log('size 1---------:'+size);
    
    //记录位置
    window.onscroll = function () {

        var patt1 = /\(.*?\)/;
        var srtY = document.querySelector('#pullrefresh .mui-scroll').style.transform || document.querySelector('#pullrefresh .mui-scroll').style["-webkit-transform"];
        if (srtY) {
            var Y = parseInt(srtY.match(patt1)[0].split(",")[1])
        } else {
            var Y = 0;
        }
        //console.log(Y)
        var S = document.querySelector('#pullrefresh').querySelectorAll('ul.mui-table-view').length;
        //console.log("Y-:"+Y);
        //console.log("S-:"+S);
        if (window.sessionStorage) {
            sessionStorage.setItem("{{ctx.url}}_top", Y);
            sessionStorage.setItem("{{ctx.url}}_size", S);
            console.log('sessionStorage tops ---------:'+Y);
            console.log('sessionStorage size---------:'+S);
        }
    }
    //点击跳转
    var segmentedControlbtn = document.querySelectorAll("#segmentedControl a.mui-control-item");
    for(var i = 0;i<segmentedControlbtn.length;i++){
        segmentedControlbtn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            mui.openWindow({url: href})

        })
    }

    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            var table = document.body.querySelector('#pullrefresh .mui-table');
            var uls = table.querySelectorAll('ul.mui-table-view');
            //var cells = document.body.querySelectorAll('.mui-table-view');
            
            uls[0].className= 'mui-table-view margin-top-6';
            
            for (var i = uls.length, len = i + 3; i < len; i++) {
            	var ul = document.createElement('ul');
            	ul.className = 'mui-table-view margin-top-6';
                
                var li1 = document.createElement('li');
                li1.className = 'mui-table-view-cell size-14';
                li1.innerHTML = '<div class="mui-row">'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>房号:'+881234+
                '</div>'+
                '</div>'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>生成时间:2018-09-01 22:36:00'+
                '</div>'+
                '</div>'+
                '</div>';
                
                var li2 = document.createElement('li');
                li2.className = 'mui-table-view-cell size-14';
                li2.innerHTML = '<div class="mui-row">'+
                '<div class="mui-col-xs-3">'+
                '<div>状态:正常'+
                '</div>'+
                '</div>'+
                '<div class="mui-col-xs-9">'+
                '<a class="mui-btn mui-btn-primary agentinfo" href="/center/agent/info/?id={{item.id}}" >复制</a>'
                '</div>'+
                '</div>';
                
                ul.appendChild(li2);
                ul.appendChild(li1);
            
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(ul, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {

            var table = document.body.querySelector('#pullrefresh .mui-table');
            var cells = document.body.querySelectorAll('#pullrefresh .mui-table-view');
            var count = "{{count}}";
            console.log('count-----:'+count);
            console.log('cells.length-----:'+cells.length);
            
            console.log('parseInt(count) > cells.length---:'+(parseInt(count) > cells.length));

            if(parseInt(cells.length) < parseInt(count)){
                createFragment(10)
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }else {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            }

        }, 1000);
    }

    var createFragment = function(count, page) {
        //无限加载
        var table = document.body.querySelector('#pullrefresh .mui-table');
        var lastIndex = table.querySelectorAll('ul.mui-table-view').length;
        console.log(lastIndex);
        var pages = page || Math.ceil((lastIndex+count)/count);
        console.log('pages------:'+pages);
        var ctxurl ="{{ctx.url}}";
        var opt ="{{opt}}";
        
        console.log("createFragment--url--:"+ctxurl);
        console.log("page--:"+pages);
        
        mui.ajax("{{ctx.url}}",{
            data:{
                page:pages,
                opt:opt
            },
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                //获得服务器响应
                console.log("createFragment data--:"+JSON.stringify(data));
                console.log(" data.data--:"+JSON.stringify(data.data));
                
                $('#pullrefresh .mui-table').append(
                    //tplRender(data.data)
                    template('msg-template', {"record": data.data})
                    );
            }
        });

    };
    
    
    function createRefresh(data) {
        setTimeout(function() {
            var table = document.body.querySelector('#pullrefresh .mui-table');
            var uls = table.querySelectorAll('ul.mui-table-view');
            uls[0].className= 'mui-table-view margin-top-6';
            
            var ul = document.createElement('ul');
            	ul.className = 'mui-table-view margin-top-6';
                
            var li1 = document.createElement('li');
                li1.className = 'mui-table-view-cell size-14';
                li1.innerHTML = '<div class="mui-row">'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>房号:'+data.password+
                '</div>'+
                '</div>'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>生成时间:'+data.createtime
                '</div>'+
                '</div>'+
                '</div>';
                
             var li3 = document.createElement('li');
                li3.className = 'mui-table-view-cell size-14';
                li3.innerHTML = '<div class="mui-row">'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>玩家ID:'+data.uid+
                '</div>'+
                '</div>'+
                '<div class="mui-col-sm-6 mui-col-xs-6">'+
                '<div>金币:'+data.deposit_count
                '</div>'+
                '</div>'+
                '</div>';

                
             var li2 = document.createElement('li');
                li2.className = 'mui-table-view-cell size-14';
                li2.innerHTML = '<div class="mui-row">'+
                '<div class="mui-col-xs-4">'+
                '<div>状态：'+'<span class="text-success">'+(data.catalog==1?'待存入':'待取出')+'</span>'+
                '</div>'+
                '</div>'+
                '<div class="mui-col-xs-7">'+
                '<button class="mui-btn mui-btn-primary copyroomno" type="button" id="'+data.password+'">复制</button>'+
                '</div>'+
                '</div>';
                
                
                ul.appendChild(li1);
                ul.appendChild(li3);
                ul.appendChild(li2);
            
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(ul, table.firstChild);
                //mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }

        mui.ready(function() {
        	console.log('mui.ready size---:'+ size);
            var page = Math.ceil(size/10);
            console.log(' mui.ready page---:'+ page);
            if(page>1 ){
                for (var i = 1; i < (page+1); i++) {
                    createFragment(10,(i+1))
                }
            }
            
            mui('#pullrefresh').pullRefresh().scrollTo(0,tops);
            
             //复制
            mui(document).on('tap','button.copyroomno',function(){
                var self = this;
                var message = this.getAttribute("id");
                var input = document.createElement("input");
                input.value = message;
                document.body.appendChild(input);
                input.select();
                input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
                document.body.removeChild(input);
                mui.toast("复制房间号 "+message+" 到剪贴板成功!");
                return false;
            })
            //领取
            mui(document).on('tap','a.getcoinnum',function(){
           	 var roomno = this.getAttribute("id");
           	 var href = '/center/safebox/getcoinnum/?roomno='+roomno;
             mui.ajax(href,{
                 data:{},
                 dataType:'json',//服务器返回json格式数据
                 type:'get',//HTTP请求类型
                 success:function(data){
                     //获得服务器响应
                     console.log('get data:'+JSON.stringify(data));
                     if(data.errno==0){
                        mui.toast("领取成功!");
                        location.reload();
                        //href="/center/safebox/index/?opt=1"
                     }else{
                        mui.toast("领取失败!");
                     }
                 }
             });
             return false;
                mui.toast("领取"+message+"成功!");
                return false;
            })
            
            mui("header").on('tap','.mui-pull-left',function(){
            var id = this.getAttribute("href");
            mui.openWindow({
                url: id,
            });
            return;
            })
            
        $("#createverroom").on("tap",function () {
    	var that = this;
    	var userId = $("input[name='depuserId']").val();
        
        if(userId===''){
            mui.toast("请输入存入玩家ID");
            return;
        }
        console.log('createroom-:');
        var href = '/center/safebox/createroom/?catalog=1';
        mui.ajax(href,{
            data:{userId:userId},
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                //获得服务器响应
                console.log('get data:'+JSON.stringify(data));
                if(data.errno==0){
                   console.log('get data.data.roomno:'+JSON.stringify(data.data.password));
                   $("#verroomno").attr('placeholder',data.data.password);
                   mui.toast("创建成功!");
                   createRefresh(data.data);
                }else{
                   mui.toast("创建失败!");
                }
            }
        });
        return false;
        })
        
        $("#creatpoproom").on("tap",function () {
    	var that = this;
    	var userId = $("input[name='popuserId']").val();
    	var coinnum = $("input[name='coinnum']").val();
        
        if(userId===''){
            mui.toast("请输入用户ID");
            return;
        }
        if(coinnum===''){
            mui.toast("请输入赠送金币");
            return;
        }
        console.log('creatpoproom-:');
        var href = '/center/safebox/createroom/?catalog=2';
        mui.ajax(href,{
            data:{userId:userId,coinnum:coinnum},
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                //获得服务器响应
                console.log('get data :'+JSON.stringify(data));
                if(data.errno==0){
                   console.log('get data.data.roomno:'+JSON.stringify(data.data.password));
                   $("#poproomno").attr('placeholder',data.data.password);
                   mui.toast("创建成功!");
                   createRefresh(data.data);
                   
                }else{
                   mui.toast("创建失败!");
                }
            }
        });
        return false;
        })
        
        $("#copyverroom").on("tap",function () {
    	 var that = this;
    	 var message = $("#verroomno").attr('placeholder');
    	 var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 

    	　if (!re.test(message)) {
    	　　　　//mui.alert("请输入数字");
    	     mui.alert('请创建房间！');
    	　　　　return false;
    	 }else{
    		 var input = document.createElement("input");
             input.value = message;
             document.body.appendChild(input);
             input.select();
             input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
             document.body.removeChild(input);
             mui.toast("复制房间号 "+message+" 到剪贴板成功!");
    	 }
    	 
        })
        
        $("#copypoproom").on("tap",function () {
    	 var that = this;
    	 var message = $("#poproomno").attr('placeholder');
    	 var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 

    	　if (!re.test(message)) {
    	　　　　//mui.alert("请输入数字");
    	     mui.alert('请创建房间！');
    	　　　　return false;
    	 }else{
    		 var input = document.createElement("input");
             input.value = message;
             document.body.appendChild(input);
             input.select();
             input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
             document.body.removeChild(input);
             mui.toast("复制房间号 "+message+" 到剪贴板成功!");
    	 }
    	 
        })
        
        });

</script>
{% endblock %}